<template>
  <div class="doctor-list-add">
    <el-form
      :label-position="'right'"
      label-width="80px"
      :model="formLabel"
      :rules="rules"
      ref="formLabel"
    >
      <el-form-item label="姓名" required prop="name">
        <el-input v-model="formLabel.name" placeholder="请输入姓名"></el-input>
      </el-form-item>
      <el-form-item label="城市" required prop="location">
        <el-select v-model="formLabel.location" placeholder="请选择城市">
          <el-option
            v-for="(item, index) of cities"
            :key="index"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="性别" required prop="gender">
        <el-select v-model="formLabel.gender" placeholder="请选择性别">
          <el-option label="男" value="男"></el-option>
          <el-option label="女" value="女"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="手机号码" required prop="phone">
        <el-input
          placeholder="请输入手机号码"
          v-model="formLabel.phone"
          maxlength="11"
          show-word-limit
        ></el-input>
      </el-form-item>
      <el-form-item label="职务" required prop="position">
        <el-input
          v-model="formLabel.position"
          placeholder="请输入职称（如：xxxx医院xxxx区xx院长）"
        ></el-input>
      </el-form-item>
      <el-form-item label="职称" required prop="post">
        <el-input
          v-model="formLabel.post"
          placeholder="请输入职称（如：主任医师）"
        ></el-input>
      </el-form-item>
      <el-form-item label="头像链接" required prop="portrait">
        <el-input placeholder="请输入头像链接" v-model="formLabel.portrait">
          <template slot="prepend">Http://</template>
        </el-input>
      </el-form-item>
      <el-form-item label="个人履历" required prop="description">
        <el-input
          placeholder="请输入个人履历"
          type="textarea"
          v-model="formLabel.description"
          :autosize="{ minRows: 3, maxRows: 15 }"
        ></el-input>
      </el-form-item>
      <el-form-item label="主要贡献" required prop="contribution">
        <el-input
          placeholder="请输入主要贡献"
          type="textarea"
          v-model="formLabel.contribution"
          :autosize="{ minRows: 3, maxRows: 15 }"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit('formLabel')"
          >立即创建</el-button
        >
        <el-button @click="$router.push('/doctorManage/list')">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  props: {
    formDate: {
      type: Object,
      default: {
        name: "",
        location: "",
        gender: "",
        phone: "",
        position: "",
        post: "",
        portrait: "",
        description: "",
        contribution: "",
        detail: "",
      },
    },
    isEdit: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    formDate: {
      handler(val) {
        if (this.isEdit) {
          this.formLabel = val;
        }
      },
      deep: true,
    },
  },
  data() {
    return {
      cities: [
        { label: "北京", value: "beijing" },
        { label: "上海", value: "shanghai" },
        { label: "深圳", value: "shenzhen" },
        { label: "赤峰", value: "chifeng" },
        { label: "长沙", value: "changsha" },
        { label: "浙江", value: "zhejiang" },
        { label: "大连", value: "dalian" },
        { label: "南昌", value: "nanchang" },
        { label: "武汉", value: "wuhan" },
      ],
      formLabel: {
        name: "",
        location: "",
        gender: "",
        phone: "",
        position: "",
        post: "",
        portrait: "",
        description: "",
        contribution: "",
        detail: "",
      },
      rules: {
        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        location: [{ required: true, message: "请选择城市", trigger: "blur" }],
        gender: [{ required: true, message: "请选择性别", trigger: "blur" }],
        phone: [{ required: true, message: "请输入手机号码", trigger: "blur" }],
        position: [{ required: true, message: "请输入职务", trigger: "blur" }],
        post: [{ required: true, message: "请输入职称", trigger: "blur" }],
        portrait: [
          { required: true, message: "请输入头像链接", trigger: "blur" },
        ],
        description: [
          { required: true, message: "请输入个人履历", trigger: "blur" },
        ],
        contribution: [
          { required: true, message: "请输入个人贡献", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.isEdit) {
            this.axios
              .put("doctor/doctor_list/update", this.formLabel)
              .then((res) => {
                if (res.code === 200) {
                  this.$message.success("修改专家信息成功");
                  this.$router.push("/doctorManage/list");
                }
              });
          } else {
            this.axios
              .post("doctor/doctor_list/add", this.formLabel)
              .then((res) => {
                if (res.code === 200) {
                  this.$message.success("添加医生成功");
                  this.$router.push("/doctorManage/list");
                }
              });
          }
        } else {
          return false;
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.doctor-list-add {
  .el-form {
    width: 70%;
    margin: 0 auto;
  }
}
</style>
